<template>
	<div>
	<el-row>
	  <el-col :span="17">
		  
		  <img src="../assets/img/product.png" />
		  
		  {{productName}}
	  </el-col>
	  <el-col :span="5" id="price">
	  		<i class="el-icon-info"></i>
			价格 ：<font color="seagreen">免费</font>
	  </el-col>
	  <el-col :span="2">
		  
		    <el-button type="primary" @click="order()" :loading="orderLoading">订购</el-button>
	  </el-col>
	</el-row>
	
	<el-divider></el-divider>
	</div>
</template>

<script>
	import app from '../App.vue'
	
	export default{
		name:'product',
		props:['productName'],
		data: function(){
			return{
				orderLoading:false
				
				
			}
		},
		
		methods:{
			
			order:function(){
	
				this.orderLoading=true
				var server = this.$myConfig.server
				var loginAddr = this.$myConfig.loginAddr
				var data = {productName:this.productName}
				var that = this
				
				axios({
				  method: 'post',
				  url: server + '/shop/order',
				  data: data,
				  withCredentials: true
				}).then(function (response) {
						
					var status = response.data.status
					if(status==-1){
						that.$message.error("您还有登陆哦")
						that.orderLoading=false
						
						that.timer = setTimeout(()=>{   
						            window.location.href = loginAddr ;           
						                   },2000);
						
					}else if(status==0){
						 that.$message.waring("服务器开了下小差，暂时不能订购")
						 that.orderLoading=false
					}else{
						that.orderLoading=false
						that.$message.success("订阅成功")
					}
											
											})
					.catch(function (error) {
							console.log(error);
											});				
			
			}
			
	
		}
		
		
		
	}
	
</script>

<style>
	
	img{
		width: 5%;
		
	}
	
	#price{
		padding: 1% 0 0 0;
	}
	
	
</style>
